import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { AlipayOutlined, LockOutlined, MobileOutlined, TaobaoOutlined, UserOutlined, WeiboOutlined, } from '@ant-design/icons';
import { LoginFormPage, ProFormCaptcha, ProFormCheckbox, ProFormText, } from '@ant-design/pro-components';
import { Button, Divider, message, Space, Tabs, theme } from 'antd';
import axios from 'axios';
import { useState } from 'react';
const iconStyles = {
    color: 'rgba(0, 0, 0, 0.2)',
    fontSize: '18px',
    verticalAlign: 'middle',
    cursor: 'pointer',
};
const loginPage = () => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [loginType, setLoginType] = useState('account');
    const { token } = theme.useToken();
    const handleFormSubmit = async (values) => {
        // 这里可以执行您想要的操作
        console.log("表单提交成功！", values);
        if (loginType === 'account'){
            const username = values.username;
            const password = values.password;
            try {
                const response = await axios.post('http://localhost:8084/user/login',
                    {
                        username : username,
                        password : password
                    }
                );
                if (response.data.code===0){
                    message.error(response.data.msg)
                }else {
                    // 登录成功后跳转至主页面
                    sessionStorage.setItem('phone',response.data.data.phone)
                    sessionStorage.setItem('idpicpath',response.data.data.idpicpath)
                    sessionStorage.setItem('address',response.data.data.address)
                    sessionStorage.setItem('username',response.data.data.username)
                    sessionStorage.setItem('id',response.data.data.id)
                    window.location.href = '/'
                }
            } catch (error) {
                console.error(error);
            }
        }else {
            const phone = values.mobile;
            const validate =values.captcha;
            try {
                const response = await axios.post('http://localhost:8084/user/phoneLogin',
                    {
                        phone : phone,
                        validate : validate,
                    },
                    {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }
                );
                if (response.data.code===0){
                    message.error(response.data.msg)
                }else {
                    // 登录成功后跳转至主页面
                    sessionStorage.setItem('phone',response.data.data.phone)
                    sessionStorage.setItem('idpicpath',response.data.data.idpicpath)
                    sessionStorage.setItem('address',response.data.data.address)
                    sessionStorage.setItem('username',response.data.data.username)
                    sessionStorage.setItem('id',response.data.data.id)
                    window.location.href = '/'
                }
            } catch (error) {
                console.error(error);
            }
        }

    };
    return (_jsx("div", { style: {
            backgroundColor: 'white',
            height: '100vh',
        }, children: _jsxs(LoginFormPage, {  onFinish: handleFormSubmit, backgroundImageUrl: "", logo: "./static/logo_0.png", backgroundVideoUrl: "https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr", title: "寿光农加", containerStyle: {
                backgroundColor: 'rgba(0, 0, 0,0.65)',
                backdropFilter: 'blur(4px)',
                color: "white",
            },

            subTitle: "每日最新鲜的水果蔬菜都在这里！", activityConfig: {
                style: {
                    boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
                    color: token.colorTextHeading,
                    borderRadius: 8,
                    backgroundColor: 'rgba(255,255,255,0.25)',
                    backdropFilter: 'blur(4px)',
                },
                title: '中国寿光农加果蔬网络采购平台',
                subTitle: '中国"农都"寿光市，寿光市的农产品具有高品质和丰富多样性。由于得天独厚的自然环境和科学种植技术的运用，农都的农产品天然纯净，营养丰富，口感鲜美。例如，各种优质稻谷、小麦、玉米、水果和蔬菜等多样化的农作物在农都可以找到！',
                action: (_jsx(Button, { size: "large", style: {
                        borderRadius: 20,
                        background: token.colorBgElevated,
                        color: token.colorPrimary,
                        width: 120,
                    }, children: "登录采购" })),
            }, actions: _jsxs("div", { style: {
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    flexDirection: 'column',
                }, children: [_jsx(Divider, { plain: true, children: _jsx("span", { style: {
                            color: token.colorTextPlaceholder,
                            fontWeight: 'normal',
                            fontSize: 14,
                        },
                        // 其他登录方式
                        children: "\u5176\u4ED6\u767B\u5F55\u65B9\u5F0F" }) }), _jsxs(Space, { align: "center", size: 24, children: [_jsx("div", { style: {
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                            flexDirection: 'column',
                            height: 40,
                            width: 40,
                            border: '1px solid ' + token.colorPrimaryBorder,
                            borderRadius: '50%',
                        }, children: _jsx(AlipayOutlined, { style: Object.assign(Object.assign({}, iconStyles), { color: '#1677FF' }) }) }), _jsx("div", { style: {
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                            flexDirection: 'column',
                            height: 40,
                            width: 40,
                            border: '1px solid ' + token.colorPrimaryBorder,
                            borderRadius: '50%',
                        }, children: _jsx(TaobaoOutlined, { style: Object.assign(Object.assign({}, iconStyles), { color: '#FF6A10' }) }) }), _jsx("div", { style: {
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                            flexDirection: 'column',
                            height: 40,
                            width: 40,
                            border: '1px solid ' + token.colorPrimaryBorder,
                            borderRadius: '50%',
                        }, children: _jsx(WeiboOutlined, { style: Object.assign(Object.assign({}, iconStyles), { color: '#1890ff' }) }) })] })] }), children: [_jsxs(Tabs, { centered: true, activeKey: loginType, onChange: (activeKey) => setLoginType(activeKey), children: [_jsx(Tabs.TabPane, { tab: '账号密码登录' }, 'account'), _jsx(Tabs.TabPane, { tab: '手机号登录' }, 'phone')] }), loginType === 'account' && (_jsxs(_Fragment, { children: [_jsx(ProFormText, { name: "username", fieldProps: {
                        size: 'large',
                        prefix: (_jsx(UserOutlined, { style: {
                                color: token.colorText,
                            }, className: 'prefixIcon' })),
                    }, placeholder: '用户名', rules: [
                        {
                            required: true,
                            message: '请输入用户名!',
                        },
                    ] }), _jsx(ProFormText.Password, { name: "password", fieldProps: {
                        size: 'large',
                        prefix: (_jsx(LockOutlined, { style: {
                                color: token.colorText,
                            }, className: 'prefixIcon' })),
                    }, placeholder: '密码', rules: [
                        {
                            required: true,
                            message: '请输入密码！',
                        },
                    ] })] })), loginType === 'phone' && (_jsxs(_Fragment, { children: [_jsx(ProFormText, { fieldProps: {
                        size: 'large',
                        prefix: (_jsx(MobileOutlined, { style: {
                                color: token.colorText,
                            }, className: 'prefixIcon' })),
                    }, name: "mobile", placeholder: '手机号', rules: [
                        {
                            required: true,
                            message: '请输入手机号！',
                        },
                        {
                            pattern: /^1\d{10}$/,
                            message: '手机号格式错误！',
                        },
                    ] }), _jsx(ProFormCaptcha, { fieldProps: {
                        size: 'large',
                        prefix: (_jsx(LockOutlined, { style: {
                                color: token.colorText,
                            }, className: 'prefixIcon' })),
                    }, captchaProps: {
                        size: 'large',
                    }, placeholder: '请输入验证码', captchaTextRender: (timing, count) => {
                        if (timing) {
                            return `${count} ${'获取验证码'}`;
                        }
                        return '获取验证码';
                    }, name: "captcha", rules: [
                        {
                            required: true,
                            message: '请输入验证码！',
                        },
                    ], onGetCaptcha: async () => {
                        message.success('获取验证码成功！验证码为：1234');
                    } })] })), _jsxs("div", { style: {
                    marginBlockEnd: 24,
                }, children: [_jsx(ProFormCheckbox, { noStyle: true, name: "autoLogin", children: "自动登录" }), _jsx("a", { style: {
                        float: 'right',
                    },href : "/Register", children: "注册账号" })] })] }) }));
};
export default loginPage;